<template>
    <div class="clearfix">
        <section class="content-header">
            排班管理&nbsp;/&nbsp;值班岗位管理&nbsp;/&nbsp;新增值班岗位
        </section>

        <div class="col-md-12" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-4">
                        <div class="box-body">
                            <danwei v-model="newUrgentData.companyId" />
                            <bumen v-model="newUrgentData.deptId" :companyId="newUrgentData.companyId" />
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">岗位名称：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="inputEmail3" maxlength="10" placeholder="输入岗位名称" v-model="newUrgentData.jobName" @blur="isRepeat">
                                </div>
                            </div>
                            <person v-model="newUrgentData.leaderId" :deptId="newUrgentData.deptId" />
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">联系电话：</label>
                                <div class="col-sm-8">
                                    <input onkeyup="value=value.replace(/[^\d]/g,'')" type="text" class="form-control" id="inputEmail3" placeholder="输入11位手机号码" v-model="newUrgentData.phonenum">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="box-body">
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.companyId && !newUrgentData.companyId) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择单位</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.deptId && !newUrgentData.deptId) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择部门</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: jobNameStatus!='1' ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i>
                                    <span v-if="jobNameStatus==0">请输入岗位名称</span>
                                    <span v-if="jobNameStatus=='-1'">岗位名称已存在</span>
                                </span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.leaderId && !newUrgentData.leaderId) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任人</span>
                            </div>
                            <div class="form-group">
                                <span class="error" :style="{visibility: (valid.phonenum && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.newUrgentData.phonenum)) ? 'visible' : 'hidden'}">
                                    <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" rows="5" placeholder="请输入事件描述" maxlength="80" v-model="newUrgentData.remark"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">岗位人员：</label>
                                <div class="col-sm-5">
                                    <v-select placeholder="请选择" multiple :options="personsList" label="name" :value="newUrgentData.persons" style="background:#FFF"></v-select>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-md-8">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">值班时间：</label>
                                <div class="col-sm-10">
                                    <table id="example" class="addgangwei" style="font-size:14px">
                                        <tr v-for="(item,index) in newUrgentData.timeList" :key="item.value">
                                            <td @click="deleteItem(index)" style="cursor: pointer;">
                                                <i class="fa fa-times" aria-hidden="true"></i>
                                            </td>
                                            <td class="weekcheck">星期
                                                <input type="checkbox" value="1" @change="selectWeek($event,index)">一
                                                <input type="checkbox" value="2" @change="selectWeek($event,index)">二
                                                <input type="checkbox" value="3" @change="selectWeek($event,index)">三
                                                <input type="checkbox" value="4" @change="selectWeek($event,index)">四
                                                <input type="checkbox" value="5" @change="selectWeek($event,index)">五
                                                <input type="checkbox" value="6" @change="selectWeek($event,index)">六
                                                <input type="checkbox" value="7" @change="selectWeek($event,index)">日
                                            </td>
                                            <td>
                                                <div class="timeselect">时段</div>
                                                <div class="timeselect"><input type="text" v-model="item.time1" class="form-control pull-left" :ref="'datepicker' + index" :index="index" time="time1" placeholder="hh:ii">
                                                    <div class="icon">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                                <div class="timeselect">--</div>
                                                <div class="timeselect"><input type="text" v-model="item.time2" class="form-control pull-left" :ref="'datepicker_' + index" :index="index" time="time2" placeholder="hh:ii">
                                                    <div class="icon">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" @click="additem" style="cursor: pointer;">添加一行</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-2" style="text-align: center">
                        <button type="button" class="btn btn-info" style="margin-right:50px" @click="addNewUrgent">提交</button>
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                    </div>
                    <div class="col-md-6"></div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="station">
                                    <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</template>

<script>
import utils from "@/utils/index"

import bumen from "@/components/common/scheduling/bumen.vue";
import danwei from "@/components/common/scheduling/danwei.vue";
import person from "@/components/common/scheduling/person.vue";


export default {
    data() {
        return {

            options: [
                { "student_id": 1, "name": "Vence" },
                { "student_id": 2, "name": "Job" },
                { "student_id": 3, "name": "Jack" },
            ],
            placeholder: 'Choose a student..',
            students: [],
            newUrgentData: {
                jobName: '',
                deptId: '',
                companyId: '',
                leaderId: '',
                phonenum: '',
                remark: '',
                persons: [],
                timeList: [{
                    time1: '',
                    time2: '',
                    cycleList: ['0', '0', '0', '0', '0', '0', '0']
                },
                ]
            },
            personsList: [],
            valid: {
                jobName: false,
                deptId: false,
                companyId: false,
                leaderId: false,
                phonenum: false,
            },
            jobNameStatus: '1'
        };
    },
    components: {
        bumen,
        danwei,
        person
    },
    mounted() {
        this.selectDate()
    },
    watch: {
        'newUrgentData.deptId'() {
            this.getPersons()
        },
        'newUrgentData.persons'() {
            // this.newUrgentData.persons = utils.deteleArr(this.newUrgentData.persons)
            console.log(utils.deteleArr(this.newUrgentData.persons))
        }
    },
    methods: {
        //选择周几的数组
        selectWeek(event, index) {
            // console.log(event.target.checked)
            if (event.target.checked) {
                // this.newUrgentData.timeList[index].cycleList.push(event.target.value)
                this.newUrgentData.timeList[index].cycleList[event.target.value - 1] = event.target.value
                // console.log(event.target.value)
            } else {
                this.newUrgentData.timeList[index].cycleList[event.target.value - 1] = '0'
            }
        },
        //选择时间段
        selectDate() {
            for (let k in this.$refs) {
                console.log(this.$refs)
                let time = this.$refs[k][0].getAttribute('time')
                let index = this.$refs[k][0].getAttribute('index')

                $(this.$refs[k])
                    .datetimepicker({
                        autoclose: true,
                        format: "hh:ii",
                        startView: 1,
                        minView: 0,
                        maxView: 1,
                    })
                    .on("changeDate", ev => {
                        // console.log(ev)
                        this.newUrgentData.timeList[index][time] = ev.target.value;
                        // console.log(this.newUrgentData.timeList)

                    });
            }
        },
        //添加一行排班
        additem() {
            let addData = {
                time1: '',
                time2: '',
                cycleList: ['0', '0', '0', '0', '0', '0', '0']
            }
            this.newUrgentData.timeList.push(addData);
            this.$nextTick(() => {
                this.selectDate()
            })
        },
        //删除一行排班        
        deleteItem(index) {
            this.newUrgentData.timeList.splice(index, 1);
        },
        //获取人员列表
        getPersons() {
            this.$api.paiban.persons({
                deptId: this.newUrgentData.deptId
            }).then(res => {
                if (res.success) {
                    console.log(res);
                    this.personsList = res.data
                }
            });
        },
        //添加岗位操作
        addNewUrgent() {
            if (this.newUrgentData.companyId == "") {
                this.valid.companyId = true;
            } else if (this.newUrgentData.deptId == "") {
                this.valid.deptId = true;
            } else if (this.jobNameStatus != 1) {
                this.valid.jobName = true;
            } else if (this.newUrgentData.leaderId == "") {
                this.valid.leaderId = true;
            } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.newUrgentData.phonenum)) {
                this.valid.phonenum = true;
            } else {
                this.$api.paiban.newUrgent(this.newUrgentData).then(res => {
                    if (res.success) {
                        console.log(res);
                        this.$$message({
                            message: "恭喜您，添加成功！",
                            type: "success"
                        });
                        this.$router.push({ path: "station" });
                    }
                });
            }
        },
        //查看岗位名称是否重复
        isRepeat() {
            this.$api.paiban.isUrgentName({
                jobName: this.newUrgentData.jobName,
                deptId: this.newUrgentData.deptId,
                companyId: this.newUrgentData.companyId,
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.jobNameStatus = res.data
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.control-label {
  padding: 0 !important;
  line-height: 34px;
  text-align: right;
}
.addgangwei {
  background: #fff;
  td {
    padding: 5px 20px;
    border: 1px solid #d2d6de;
  }
  .weekcheck {
    input {
      margin-left: 20px;
      vertical-align: middle;
      margin-top: -2px;
    }
  }
  .timeselect {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    margin: 0 10px;
    float: left;
    .form-control {
      width: 60px;
      display: inline-block;
      border-right: 0;
      margin-right: -2px;
    }
    .icon {
      float: left;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-left: 0;
      padding-right: 10px;
      border-radius: 0px 4px 4px 0px;
    }
  }
}
</style>
